<script id="scrollviewTemp" type="text/x-kendo-template">
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-3">
                <h5 class="card-header">DOM 滚动视图</h5>
                <div class="card-body">
                    <div id="domScrollView">
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Aries.png" alt="Mu">
                            <picture style="background-image: url('img/temp/Aries.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Taurus.png" alt="Aldebaran">
                            <picture style="background-image: url('img/temp/Taurus.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Gemini.png" alt="Saga">
                            <picture style="background-image: url('img/temp/Gemini.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Cancer.png" alt="Death Mask">
                            <picture style="background-image: url('img/temp/Cancer.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Leo.png" alt="Aiolia">
                            <picture style="background-image: url('img/temp/Leo.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Virgo.png" alt="Shaka">
                            <picture style="background-image: url('img/temp/Virgo.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Libra.png" alt="Dohko">
                            <picture style="background-image: url('img/temp/Libra.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Scorpion.png" alt="Milo">
                            <picture style="background-image: url('img/temp/Scorpion.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Sagittarius.png" alt="Aiolos">
                            <picture style="background-image: url('img/temp/Sagittarius.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Capricorn.png" alt="Shura">
                            <picture style="background-image: url('img/temp/Capricorn.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Aquarius.png" alt="Camus">
                            <picture style="background-image: url('img/temp/Aquarius.png');"></picture>
                        </div>
                        <div class="position-relative text-center" data-role="page">
                            <img src="img/temp/Picses.png" alt="Aphrodite">
                            <picture style="background-image: url('img/temp/Picses.png');"></picture>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3">
                <h5 class="card-header">普通滚动视图</h5>
                <div class="card-body">
                    <div id="generalScrollView"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3">
                <h5 class="card-header">指定页滚动视图</h5>
                <div class="card-body">
                    <div id="pageScrollView"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3">
                <h5 class="card-header">无圆点滚动视图</h5>
                <div class="card-body">
                    <div id="noDotScrollView"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3">
                <h5 class="card-header">标题滚动视图</h5>
                <div class="card-body">
                    <div id="titleScrollView"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3">
                <h5 class="card-header">分组滚动视图</h5>
                <div class="card-body">
                    <div id="groupScrollView"></div>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        picture {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            filter: blur(50px);
            opacity: .8;
        }
        .k-scrollview {
            height: 162px;
        }
        #titleScrollView,
        #groupScrollView {
            height: 242px;
        }
        #titleScrollView .title {
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 8px 16px;
            width: 100%;
            height: 60px;
            color: #fff;
            background: rgba(0, 0, 0, .5);
            text-align: left;
        }
    </style>
</script>